﻿<UserControl
    x:Class="CodeShow.CS.GroupedItemsDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CodeShow.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <!--BeginCutPaste-->
    <UserControl.Resources>
        <CollectionViewSource 
            x:Name="collectionViewSourceName" 
            IsSourceGrouped="True" 
            ItemsPath="GroupItems" />
    </UserControl.Resources>
    
    <Grid>
        <GridView 
            ItemsSource="{Binding 
              Source={StaticResource collectionViewSourceName}}"
            HorizontalAlignment="Center" 
            VerticalAlignment="Center">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="20">
                        <TextBlock 
                            Text="{Binding ItemName}" FontWeight="Bold" />
                        <TextBlock 
                            Text="{Binding Description}" TextWrapping="NoWrap" />              
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid 
                        MaximumRowsOrColumns="3" 
                        Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid 
                                Background="LightGray" 
                                Margin="0">
                                <TextBlock TextWrapping="WrapWholeWords"
                                    Text='{Binding GroupTitle}' 
                                    Foreground="Black" 
                                    Margin="30"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </Grid>
    <!--EndCutPaste-->
</UserControl>
